<template>
    <div>
        index
        <router-link to="/content?id=1&title=天龙八部">router-link查询字符串传参</router-link><br>
        <router-link to="/user/007/name/admi">router-link路径传参</router-link><br>
        <router-link :to="{path: '/content', query: {id: 2, title: '天龙八部2'}}">router-link动态属性绑定</router-link><br>
        <router-link :to="{name: 'member', params: {id: 20, name: '天龙八部3'}}">查询字符串传参-link动态属性绑定</router-link><br>
    </div>
    <div>
        <button @click="goTo1">编程式导航1</button>
        <button @click="goTo1">编程式导航2</button>
    </div>
</template>

<script setup>
    import{ useRouter} from 'vue-router'
    const router = useRouter()

    const goTo1 = () => {
        router.push('/content?id=1&title=天龙八部')
    }
    const goTo2 = () => {
        router.push({path: '/content', query: {id: 2, title: '天龙八部2'}})
    }
</script>

<style lang="scss" scoped>

</style>